<template>
  <div class="school-main2">
    <div class="htit">
      <h2 class="h2">预科 · 留学项目</h2>
      <div class="intro">OVERSEAS COOPERATIVE UNIVERSITY</div>
    </div>
    <div class="box">
      <dl class="navs flex-bect">
        <dd v-for="(item, index) in navs" :key="index" class="dd flex-ct" @click="cur = index " :class="{on: cur === index}">{{item.name}}</dd>
      </dl>
      <div v-for="(items,i) in navs.length" :key="i" class="school-ban" :class="[cur == i ? 'on':'', 'school-ban'+i]">
        <div :class="'school-banw'+i" class="ov">
          <div class="swiper-wrapper">
            <div v-for="(item,j) in 8" :key="j" class="swiper-slide dd">
              <div class="imgW"><img src="./static/image/school-2.png" alt="" class="img"></div>
              <div class="div">
                <div class="h3 tc ntit">{{i}}意大利国际生留学直通车</div>
                <div class="con">留学国家: 意大利<br>适合人群: 高中中专职高毕业生<br>本科毕业生<br>课程学制: 1+3、1+2<br>收费标准: 60000元</div>
              </div>
              <div class="flex-ri"><span href="javascript:;" class="btn flex-ct">向TA提问</span></div>
            </div>
          </div>
        </div>
        <span class="arrow prev"></span>
        <span class="arrow next"></span>
      </div>
      <div class="school-ban">
        
      </div>
    </div>
  </div>
</template>

<script>
// 不支持 import
module.exports = {
  data: function () {
    return {
      total:20,
      keywords:'',
      navs:[{name:'英国', id:1},{name:'美国', id:2},{name:'澳大利亚', id:3},{name:'加拿大', id:4},{name:'新西兰', id:5},{name:'韩国', id:6},{name:'日本', id:7},{name:'泰国', id:8},{name:'俄罗斯', id:9},{name:'马来西亚', id:10}],
      cur:0,
      schoolScreen:[
        {
          name:'国家',id:1,cur:0,checked:'', 
          list:[{name:'不限', id:0},
        ]
        },
        {
          name:'我要读',id:2,cur:0,checked:'', 
          list:[{name:'不限', id:0},{name:'本硕连续', id:1},{name:'美国', id:2},{name:'澳大利亚', id:3},{name:'加拿大', id:4},{name:'新西兰', id:5},{name:'韩国', id:6},{name:'日本', id:7},{name:'泰国', id:8},{name:'俄罗斯', id:9},{name:'马来西亚', id:10}]
        },
        {
          name:'模式',id:3,cur:0,checked:'', 
          list:[{name:'不限', id:0},{name:'0.5+1/2留学', id:1},{name:'美国', id:2},{name:'澳大利亚', id:3},{name:'加拿大', id:4},{name:'新西兰', id:5},{name:'韩国', id:6},{name:'日本', id:7},{name:'泰国', id:8},{name:'俄罗斯', id:9},{name:'马来西亚', id:10}]
        },
        {
          name:'地区',id:4,cur:0,checked:'', 
          list:[{name:'不限', id:0},{name:'北京', id:1},{name:'美国', id:2},{name:'澳大利亚', id:3},{name:'加拿大', id:4},{name:'新西兰', id:5},{name:'韩国', id:6},{name:'日本', id:7},{name:'泰国', id:8},{name:'俄罗斯', id:9},{name:'马来西亚', id:10}]
        }
      ],
      schoolCur:0,
      schoolList:[
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'},
        {name:'北京外国语大学继续教育学院', labs:'1+3/4、1+1/2、2+3',country:'英国、澳洲、加拿大...',youshi:'院校优势：中留服备案，校本部办学...', address:'北京市', src:'./static/image/home-5-1.png'}
      ],
    };
  },
  components: {},
  mounted(){
    // 文字云
    for(let i = 0; i < this.navs.length; i++){
      var swiper = this.yunBan('school-banw'+i,i)
    }
  },
  methods:{
    yunBan(bans,i){
      var prev = '.school-ban'+i+' .prev';
      var next = '.school-ban'+i+' .next';
      console.log('prev',prev)
      var ban = new Swiper("."+bans, {
        slidesPerView:4,
        spaceBetween:17,
        speed:3000,
        autoplay: true,
        navigation: {
          nextEl: next,
          prevEl: prev,
        },
      });
      return ban
    },
    // 翻页
    changePage(e){
      console.log(e)
    },
    getSchoolCur(i){
      this.schoolCur = i
    },
    getSchoolCheck(cur,item){
      this.schoolScreen[cur].cur = item.id;
      this.schoolScreen[cur].checked = item;
    },
    close(i){
      this.schoolScreen[i].cur = 0;
      this.schoolScreen[i].checked = ''
    },
  }
};
</script>

<style>

</style>